<template>
	<view class="bigBox">
		<view class="topMenu">
			<view class="check" @click="goToPage('order')">
				<view class="">订单</view>
				<view class="hr"></view>
			</view>
			<view class="" @click="goToPage('afterOrder')">
				<view class="">售后订单</view>
				<view class="hr"></view>
			</view>
			<view class="" @click="goToPage('delivery')">
				<view class="">配送薪酬</view>
				<view class="hr"></view>
			</view>
		</view>
		<view class="top">
			<view class="" @click="showSelect">
				<view class="">{{ checkStoreInfo.id ? checkStoreInfo.storeName : '全部门店' }}</view>
				<image src="https://www.yongshantuan.cn/images/yongshan/arrow.png" mode=""></image>
			</view>
			<view class="">
				<u-input
					type="text"
					placeholder="请输入序号、姓名、手机号后四位、菜品、门店进行搜索"
					v-model="storeName"
					confirm-type="search"
					@confirm="toSearch"
					:clearable="false"
				></u-input>
				<image src="https://www.yongshantuan.cn/images/yongshan/search.png" mode=""></image>
			</view>
		</view>
		<view class="timeBox">
			<!-- <view class="">选择时间</view> -->
			<view class="timeContent">
				<view class="time"><u-input type="text" v-model="timeBegin" placeholder="开始时间" :disabled="false" @click="showTimePicker('startTime')"></u-input></view>
				<view class="hr">-</view>
				<view class="time"><u-input type="text" v-model="timeEnd" placeholder="结束时间" :disabled="false" @click="showTimePicker('endTime')"></u-input></view>
			</view>
			<!-- <view class="export">导出</view> -->
			<view class="control">
				<view class="controlBox" @click="showBatchBox = !showBatchBox">
					<view class="">操作</view>
					<image src="https://www.yongshantuan.cn/images/yongshan/arrow.png" mode=""></image>
				</view>
				<view class="menu" :class="{ show: showBatchBox }">
					<view class="" @click="exportExcel">导出</view>
					<!-- <view class="" @click="deleteShowBox">取消订单</view> -->
				</view>
			</view>
		</view>
		<view class="orderList" v-for="(item, index) in orderList" :key="index">
			<view class="name">
				<view class="">
					<checkbox value="index" :checked="item.checked" @click="radioChange(index)" ref="childCheckBox" />
					<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/shopLi2.png" mode=""></image>
					{{ item.storeName }}
				</view>
				<view class="" v-if="item.state == '已付款'" @click="deleteShowBox(item.id)">取消订单</view>
			</view>
			<view class="">
				<view class="">
					地址:
					<text>{{ item.pickingAddress }}({{ item.supplyAddress }})</text>
				</view>
				<view class="">
					序号:
					<text>{{ item.pickingSerialNo }}</text>
				</view>
				<view class="">
					姓名:
					<text>{{ item.nameTakingMeal }}</text>
				</view>
				<view class="">
					手机:
					<text>{{ item.phoneTakingMeals }}</text>
				</view>
				<view class="">
					消费金额:
					<text>{{ item.totalPrice }}元</text>
				</view>
			</view>
			<!-- <view class="">
				
			</view> -->
			<view class="foods">
				<view class="">菜品名称:</view>
				<view class="">
					<view class="" v-for="(foodItem, foodIndex) in item.foods" :key="foodIndex">
						<text>
							{{ foodItem.name }}
							<text v-if="foodItem.specifications">({{ foodItem.specifications }})</text>
						</text>
						<text :class="{ error: foodItem.quantity > 1 }">x{{ foodItem.quantity }}</text>
						<text v-if="foodIndex != item.foods.length - 1">,</text>
					</view>
				</view>
			</view>
			<view class="note">
				<view class="">
					备注:
					<text>{{ item.remarks ? item.remarks : '无' }}</text>
				</view>
			</view>
			<view class="special">
				<view class="">付款时间:</view>
				<text>{{ item.createTime }}</text>
			</view>
			<view class="last">
				<view class="">下单累计次数:</view>
				<text>{{ item.orderCount }}次</text>
			</view>
			<!-- <view class="foods special">
				<view class="">下单时间: </view>
				<text>{{item.createTime}}</text>
			</view> -->
		</view>
		<view class="loadingBottom" v-if="orderList.length != 0 && moreOrderFlag">
			<u-loading mode="circle"></u-loading>
			<view class="">数据正在加载中，请稍等</view>
		</view>
		<u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm"></u-picker>
		<CommenFooter :checkIndex="1"></CommenFooter>
		<!-- <u-modal v-model="deleteShow" :show-cancel-button="true" :content="`是否要取消这${ids.length}个订单`"
			@confirm="deleteConfirm"></u-modal> -->
		<u-modal v-model="deleteShow" :show-cancel-button="true" :content="`是否要取消这个订单`" @confirm="deleteConfirm"></u-modal>
		<view class="selectBox">
			<u-popup mode="bottom" v-model="selectVisiable" @touchmove.stop.prevent="" :closeable="true">
				<view class="selectContent">
					<view class="title">门店列表</view>
					<view class="selList" v-for="(item, index) in allStoreList" :key="index" @click="selectThis(item)">{{ item.storeName }}</view>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
import { getOrderList, getStoreList, cancelOrder } from '@/utils/req/api.js';
import CommenFooter from '@/components/footer/footer.vue';

function getDate(time) {
	let year = time.getFullYear();
	let month = time.getMonth() + 1;
	let day = time.getDate();
	return { year, month, day };
}

let LastDate = new Date(new Date().getTime() - 1 * 1000 * 60 * 60 * 24);
let lastTime = getDate(LastDate);
let newDate = new Date();
let nowTime = getDate(newDate);
let timeBegin = `${lastTime.year}-${lastTime.month > 9 ? lastTime.month : '0' + lastTime.month}-${lastTime.day > 9 ? lastTime.day : '0' + lastTime.day} 17:00`;
let timeEnd = `${nowTime.year}-${nowTime.month > 9 ? nowTime.month : '0' + nowTime.month}-${nowTime.day > 9 ? nowTime.day : '0' + nowTime.day} 12:00`;

export default {
	components: {
		CommenFooter
	},
	data() {
		return {
			shopingStartTime: '',
			shopingEndTime: '',
			orderList: [],
			showTime: false, //展示时间picker
			timeType: '', //时间picker的触发类别
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true
			},
			timeBegin,
			timeEnd,

			deleteShow: false,
			deleteIndex: '',
			deleteId: '',

			pageNo: 1,
			pageSize: 10,
			moreOrderFlag: false,

			selectVisiable: false,
			checkStoreInfo: '',
			allStoreList: [],
			merchantId: '',
			storeName: '',

			showBatchBox: false,
			ids: [], //选中值的id集合
			selectRows: [] //选中值的集合
		};
	},
	mounted() {
		this.getDefaultTime();
	},
	onShow() {
		this.getStoreList();
	},
	methods: {
		getDefaultTime() {
			// let now = new Date();
			// let timeStemp = now.getTime();
			// let year = now.getFullYear();
			// let month = now.getMonth() + 1;
			// let day = now.getDate();
			// let minute = now.getMinutes();
			// let hour = now.getHours();
			// let afterTimeStemp = timeStemp + 1000 * 60 * 60 * 24;
			// let tomorrow = new Date(afterTimeStemp);
			// let afterYear = tomorrow.getFullYear();
			// let afterMonth = tomorrow.getMonth() + 1;
			// let afterDay = tomorrow.getDate();
			// let lastTimeStemp = timeStemp - 1000 * 60 * 60 * 24;
			// let yesterday = new Date(lastTimeStemp);
			// let lastYear = yesterday.getFullYear();
			// let lastMonth = yesterday.getMonth() + 1;
			// let lastDay = yesterday.getDate();
			// if (hour >= 5) {
			// 	this.timeBegin = `${year}-${month}-${day} ${5}:00`;
			// 	this.timeEnd = `${afterYear}-${afterMonth}-${afterDay} ${13}:00`;
			// } else {
			// 	this.timeBegin = `${lastYear}-${lastMonth}-${lastDay} ${13}:00`;
			// 	this.timeEnd = `${year}-${month}-${day} ${13}:00`;
			// }

			this.getOrderList();
		},

		async getOrderList(type) {
			if (!this.moreOrderFlag) {
				console.log('666');
				this.moreOrderFlag = true;
				let res = await getOrderList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					storeName: this.storeName,
					merchantId: this.merchantId,
					timeBegin: this.timeBegin,
					timeEnd: this.timeEnd
				});
				this.moreOrderFlag = false;
				this.pageNo = this.pageNo + 1;
				console.log('!!!!!', this.moreOrderFlag);
				res.data.result.records.forEach(item => {
					let foods = [];
					item.hcOrderDetailedList.forEach(foodItem => {
						foods.push({
							name: foodItem.tradeName,
							quantity: foodItem.commodityQuantity,
							specifications: foodItem.specifications
						});
					});
					item.foods = foods;
				});
				this.orderList = [...this.orderList, ...res.data.result.records];
			}
		},
		showSelect() {
			this.selectVisiable = true;
		},
		selectThis(item) {
			this.checkStoreInfo = item;
			this.merchantId = item.id;
			this.selectVisiable = false;
			this.toSearch();
		},
		//获取门店列表
		async getStoreList(type) {
			let obj = {
				pageSize: -1,
				pageNo: this.pageNo
			};
			let res = await getStoreList(obj);
			if (type != 'push') {
				this.allStoreList = res.data.result.records;
				this.allStoreList.unshift({
					storeName: '全部门店',
					id: null
				});
			} else {
				this.allStoreList = [...this.allStoreList, ...res.data.result.records];
			}
		},
		goToPage(type) {
			let url;
			if (type == 'order') {
				url = '/pages/order/order';
			} else if (type == 'afterOrder') {
				url = '/pages/order/afterOrder';
			} else if (type == 'delivery') {
				url = '/pages/order/delivery';
			}
			uni.navigateTo({
				url
			});
		},
		radioChange(index) {
			this.$set(this.orderList[index], 'checked', !this.orderList[index].checked);
			this.ids = [];
			this.selectRows = [];
			this.orderList.forEach(item => {
				if (item.checked) {
					this.ids.push(item.id);
					this.selectRows.push(item);
				}
			});
		},
		showTimePicker(type) {
			if (type == 'startTime') {
				this.timeType = type;
			}
			if (type == 'endTime') {
				this.timeType = type;
			}
			this.showTime = true;
		},
		confirm(e) {
			let time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
			if (this.timeType == 'startTime') {
				this.timeBegin = time;
			}
			if (this.timeType == 'endTime') {
				this.timeEnd = time;
			}
			this.toSearch();
		},
		toSearch() {
			this.orderList = [];
			this.pageNo = 1;
			this.getOrderList();
		},
		// deleteShowBox(index) {
		// 	this.deleteIndex = index;
		// 	this.deleteShow = true;
		// 	this.showBatchBox = false;
		// },
		deleteShowBox(id) {
			this.deleteId = id;
			this.deleteShow = true;
		},
		//确认取消订单
		async deleteConfirm() {
			let res = await cancelOrder({
				id: this.deleteId
			});
			if (res.data.success) {
				this.$showToast.call(this, '订单取消成功', 'success');
				this.getOrderList();
			} else {
				this.$showToast.call(this, res.data.message, 'warning');
			}
			console.log('res', res);
			this.deleteShow = false;
		},
		exportExcel() {
			this.showBatchBox = false;
			uni.navigateTo({
				url: `/pages/export/export?token=${uni.getStorageSync('token')}&selections=${this.ids.join(',')}`
			});
		}
	},
	onReachBottom() {
		this.getOrderList();
	}
};
</script>

<style lang="scss" scoped>
.bigBox {
	background-color: #f5f5f5;
	padding-bottom: 200rpx;
	min-height: 100vh;
}

.topMenu {
	background-color: #fff;
	padding: 20rpx;
	@include flex(flex-start, flex-start);

	> view {
		font-weight: bold;
		margin-right: 30rpx;
		font-size: 40rpx;
		line-height: 56rpx;
		color: rgba(0, 0, 0, 0.35);

		> view:nth-child(2) {
			width: 40rpx;
			height: 8rpx;
			background: #fa690a;
			margin-top: 10rpx;
			display: none;
		}
	}

	> .check {
		color: #000;

		> view:nth-child(2) {
			display: block;
		}
	}
}

.top {
	padding: 20rpx;
	@include flex(space-between, center);
	background-color: #fff;

	> view {
		@include flex();

		&:nth-child(1) {
			width: 30%;
			font-size: 30rpx;
			line-height: 40rpx;

			view {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			image {
				width: 20rpx;
				height: 20rpx;
				margin-left: 10rpx;
				flex-shrink: 0;
			}

			margin-right: 40rpx;
		}

		&:nth-child(2) {
			flex-shrink: 0;
			flex: 1;
			margin-left: 20rpx;
			@include flex();

			image {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				left: 10rpx;
				top: 5rpx;
			}

			border-radius: 50rpx;
			border: 1px solid #f5f5f5;
			position: relative;
			overflow: hidden;

			/deep/.u-input__input {
				font-size: 28rpx;
				line-height: 60rpx;
				height: 60rpx;
				min-height: auto !important;
				text-indent: 60rpx;
				background-color: #f5f5f5;
			}
		}
	}
}

.timeBox {
	padding: 20rpx;
	border-top: 1px solid #eee;
	background-color: #fff;
	@include flex(space-between, center);
	font-size: 28rpx;
	line-height: 40rpx;

	// >view:nth-child(1) {
	// 	width: 20%;
	// 	flex-shrink: 0
	// }

	.timeContent {
		@include flex();
		flex: 1;

		.time {
			width: 45%;
			background-color: #f5f5f5;
			border-radius: 100rpx;

			/deep/.u-input__input {
				text-align: center;
				font-size: 26rpx !important;
			}
		}

		.hr {
			margin: 0 10rpx;
		}
	}

	.export {
		background-color: #fa690a;
		width: 20%;
		height: 68rpx;
		border-radius: 40rpx;
		line-height: 68rpx;
		text-align: center;
		color: #fff;
		flex-shrink: 0;
	}

	.control {
		width: 25%;
		text-align: center;
		position: relative;
		font-size: 30rpx;
		line-height: 2;

		.controlBox {
			@include flex(center, center);

			image {
				width: 20rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
		}

		> .menu {
			position: absolute;
			left: 0;
			top: 100%;
			width: 100%;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			font-size: 22rpx;
			line-height: 2.5;
			padding: 10rpx;

			> view {
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);
				color: #fa690a;

				&:last-child {
					border: 0;
				}
			}

			display: none;
		}

		> .show {
			display: block;
		}
	}
}

.orderList {
	padding: 20rpx;
	background-color: #fff;
	padding: 30rpx 20rpx;
	margin-top: 20rpx;

	/deep/.uni-checkbox-input {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
	}

	/deep/.uni-checkbox-input-checked {
		border-color: #fa690a !important;

		&:before {
			content: '';
			width: 35rpx;
			height: 35rpx;
			background-color: #fa690a;
			border-radius: 50%;
			display: block;
		}
	}

	.name {
		@include flex(space-between, center);
		font-size: 28rpx;
		line-height: 40rpx;

		> view:nth-child(1) {
			color: #000;
			font-size: 32rpx;
			font-weight: 600;
			@include flex();

			/deep/.u-radio__label {
				margin-left: 0 !important;
				margin-right: 0 !important;
			}

			/deep/.u-radio__icon-wrap--checked {
				background-color: #fa690a !important;
				border: 1px solid #fa690a !important;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
				margin-left: 28rpx;
			}

			margin-bottom: 20rpx;
		}

		> view:nth-child(2) {
			color: #fa690a;
		}
	}

	> view {
		@include flex();
		font-size: 29rpx;
		// color: rgba(0, 0, 0, 0.35);
		color: #000;
		line-height: 2;
		// margin: 10rpx 0;
		flex-wrap: wrap;

		> view {
			margin-right: 20rpx;

			text {
				color: #000;
				margin-left: 10rpx;
			}
		}

		> text {
			color: #000;
		}
	}

	> .foods {
		flex-wrap: nowrap;
		line-height: 64rpx;
		@include flex(flex-start, flex-start);
		line-height: 1.5;
		margin: calc(30rpx * 0.5) 0;

		> view:nth-child(1) {
			// width: calc(32rpx * 5);
			// flex-shrink: 0;
		}

		> view:nth-child(2) {
			flex: 1;
			flex-wrap: wrap;
			@include flex();

			text {
				margin-left: 0;
				margin-right: 10rpx;
			}

			.error {
				color: red;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}

	// >.note {
	// 	font-size: 32rpx;
	// }

	> .last {
		> view:nth-child(1) {
			// width: calc(32rpx * 7);
			flex-shrink: 0;
		}
	}

	.special {
		> view {
			// width: 50%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
}

.loadingBottom {
	@include flex(center, center);
	padding: 20rpx 0;

	> view {
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #666;
	}
}

.selectContent {
	.title {
		font-size: 32rpx;
		line-height: 2;
		font-weight: bold;
		text-align: center;
		margin-bottom: 14rpx;
	}

	.selList {
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		font-size: 28rpx;
		line-height: 40rpx;
		padding: 24rpx 0;

		&:last-child {
			border: 0;
		}

		&:nth-child(2) {
			font-weight: bold;
			font-size: 32rpx;
		}
	}
}
</style>
<style lang="scss">
.selectBox {
	/deep/.u-drawer-bottom {
		width: 100% !important;
		padding: 36rpx 20rpx 40rpx 20rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		min-height: 30vh;
		max-height: 80vh;
		overflow: auto;
	}

	/deep/ {
		.u-drawer__scroll-view {
			max-height: 80vh;
		}
	}
}
</style>
